What is React

리액트는 인터렉션이 많은 웹 앱을 개발하기 위해서 주로 사용한다.

그래서 웹을 만드는 Vue , Angualar와 많이 비교하게 된다.

리액트와의 차이점은 뭘까?

바로 프레임워크와 라이브러리의 차이이다.

앵귤러와 뷰는 프레임워크이며, 리액트는 라이브러리입니다.

그럼 프레임워크와 라이브러리의 차이는 뭘까?

프레임워크는 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있다.

라이브러리는 어떠한 특정 기능을 모듈화 해놓은것입니다. (좀 더 자세하게 알고싶다면 클릭하세요 )

이 위에 그림을 보면 프레임워크는 라이브러리를 포함하고 우리가 작성한 소스코드를 호출한다.

그리고 소스 코드는 어떠한 기능을 구현하기 위해서 라이브러리를 호출하게 된다.

즉, 프레임워크안에

• 상태관리를 위한 라이브러리
• 페이지 이동을 위한 라이브러리
• 테스트를 위한 라이브러리

이렇게 프레임워크는 앱을 만드는데 필요한 대부분의 라이브러리를 가지고있다.

라이브러리는 특정 기능을 위해 모듈화 되어있는거죠.

리액트는 프레임워크가 아니라 라이브러리!

리액트가 라이브러리인 이유는 리액트는 전적으로 UI를 렌더링 하는데 관여하기 때문이다.

그리고 화면을 바꾸는 라우팅은 react-router-dom 모듈을 사용하며,

상태관리를 위해서는 redux, mobx, recoild등 여러 모듈을 사용한다.

빌드를 위해서는 webpack, npm etc..

테스팅은 Eslint , Mocha등을 이용합니다.

리액트 컴포넌트

리액트는 크게 두가지 컴포넌트 타입이 있습니다.

리액트는 컴포넌트가 여러 개로 나누어져 있기 때문에 하나의 컴포넌트를 여러 곳에서 사용할 수 있습니다.

클래스형 컴포넌트 / 함수형 컴포넌트

브라우저가 그려지는 원리 및 가상돔

리액트의 주요 특징 중 하나는 가상돔을 사용한다는 것이다.

가상돔을 왜 사용하는 알기 위해서 브라우저가 렌더링 하는 과정을 알아보자.

웹 페이지 빌드과정(Critical Rendering Path / CRP)

브라우저가 서버에서 페이지에 대한 HTML 응답을 받고 화면에 표시하기전에 여러 단계가 있다.

1. 웹 브라우저가 HTML 문서를 읽고, 스타일을 입히고 뷰포트에 표시합니다.

2. 그 과정에서, 렌더 엔진이 HTML/CSS 문서를 읽어들여서 이 문서들을 파싱하고 어떤 내용을 페이지에 렌더링할지 결정한다.

   => DOM TREE 생성

3. 브라우저가 DOM과 CSSOM을 결합하고, 프로세스는 화면에 보이는 모든 콘텐츠와 스타일 정보를 모두 포함하는 최종 렌더링 트리를 출력한다. 즉, 화면에 표시되는 모든 노드의 콘텐츠 및 스타일 정보를 포함하게된다.

   => Render TREE 생성

4. 브라우저가 페이지에 표시되는 각 요소의 크기와 위치를 계산하는 단계이다.

   => Layout (reflow)

5. 실제 화면단에 그려지는 작업을 한다.

   => Paint

Virtual Dom

이러한 문제로 인해서 나오게 된 것이 가상돔입니다.

가상 돔이란 실제 DOM을 메모리에 복사한 DOM입니다.

그럼 가상돔은 어떤방식으로 작동 될까?

데이터가 업데이트 되면 가상돔에 렌더링 되고, 이전에 생긴 가상돔과 비교해서 업데이트 된 부분만 실제 돔에 적용시켜준다.

변경된 부분을 찾는 과정을 Diffing(reconciliation)이라고 부른다.

이러한 가상돔 덕분에 만약 요소가 30개 변하였더라도 한번에 묶어서 실제 돔 수정을 한번 처리하게 된다.

그러므로 돔 조작 비용을 줄일 수있다.